<template>
  <div class="upload-container">
    <!-- <el-button
      :style="{background:color,borderColor:color}"
      icon="el-icon-upload"
      size="mini"
      type="primary"
      @click=" dialogVisible=true">上传图片
    </el-button> -->
    <el-dialog
      :visible.sync="dialogVisible"
      :append-to-body="false"
      :lock-scroll="false"
    >
      <!-- <vueCropper
        ref="fileUpload"
        :img-list.sync="fileList"
        :fixed-number="[16,8]"
        :show-file-list="true"
        :limit="1"
        img-type="tinymce"
        class="upload-demov fl"
        @removePic="removePicFn"
        @modalShowFn="getModalStatus" /> -->
      <!-- {{ detailData }} -->
      <div class="thumbnails">
        请输入图片压缩比:
        <el-input
          style="width:138px"
          size="mini"
          placeholder="0-100之间的正整数"
          @input="thumbnailsInput" />
        % &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span>默认80%</span>
      </div>
      <el-upload
        :multiple="true"
        :file-list="fileList"
        :show-file-list="true"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
        :action="actionUrl"
        :data="detailData"
        :limit="1"
        class="editor-slide-upload"
        list-type="picture-card">
        <el-button :disabled="isDisable" size="small" type="primary">点击上传</el-button>
      </el-upload>
      <div class="bottomButton">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>

  </el-dialog></div>
</template>

<script>
// import { getToken } from 'api/qiniu'
import config from '@/utils/config';
import vueCropper from '@/components/cropper'
import UploadImg from '@/components/cropper/uploadImage.vue'
import { Message } from 'element-ui';

export default {
  name: 'EditorSlideUpload',
  components: { vueCropper, UploadImg },
  props: {
    color: {
      type: String,
      default: '#1890ff'
    }
  },
  data() {
    return {
      dialogVisible: false,
      listObj: {},
      fileList: [],
      // actionUrl: config.BaseUrl + '/storage/create'
      actionUrl: config.BaseUrl + '/storage/create/thumbnails',
      detailData: {
        maxWidth: '750',
        quality: '0.8'
      },
      isDisable: false
    }
  },
  methods: {
    thumbnailsInput(val) {
      if (!Number(val)) {
        Message.error('1-100之间的正整数')
        this.isDisable = false
        return
      }
      this.detailData.quality = val / 100
      console.log(this.detailData.quality)
      if (this.detailData.quality === null) {
        this.isDisable = true
        Message.error('1-100之间的正整数')
      }
      if (this.detailData.quality > 1) {
        this.isDisable = true
        Message.error('1-100之间的正整数')
      } else {
        this.isDisable = false
      }
    },
    removePicFn(file) {
      this.handleRemove(file)
      console.log('父组件删除', file)
    },
    getModalStatus(file) {
      console.log('getModalStatus:', file)
      this.beforeUpload(file)
      console.log('this.listObj:', this.listObj)
      // this.listObj.push(file)
      // this.prductForm.picUrl = url
    //   this.cropperImg = obj.cropperImg;
    //   this.isShowCropper = obj.cropperShow;
    //   console.log(this.cropperImg)
    //   console.log(this.isShowCropper)
    },
    checkAllSuccess() {
      return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
    },
    handleSubmit() {
      console.log('this.listObj:', this.listObj)
      const arr = Object.keys(this.listObj).map(v => this.listObj[v])
      if (!this.checkAllSuccess()) {
        this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！')
        return
      }
      this.$emit('successCBK', arr)
      this.listObj = {}
      this.fileList = []
      this.dialogVisible = false
      // this.$refs.fileUpload.removeAll()
    },
    handleSuccess(response, file) {
      console.log('response:', response)
      console.log('file:', file)
      const id = file.id
      const objKeyArr = Object.keys(this.listObj)
      console.log(objKeyArr)
      for (let i = 0, len = objKeyArr.length; i < len; i++) {
        if (this.listObj[objKeyArr[i]].id === id) {
          this.listObj[objKeyArr[i]].url = response.data.url
          this.listObj[objKeyArr[i]].hasSuccess = true
          return
        }
      }
    },
    handleRemove(file) {
      const id = file.id
      const objKeyArr = Object.keys(this.listObj)
      //   console.log('id::', id)
      //   console.log('objKeyArr::', objKeyArr)
      //   console.log('this.listObj::', this.listObj)
      for (let i = 0, len = objKeyArr.length; i < len; i++) {
        console.log('id1:', this.listObj[objKeyArr[i]].id)
        console.log('id2:', id)
        if (this.listObj[objKeyArr[i]].id === id) {
          delete this.listObj[objKeyArr[i]]
          // alert(1111)
          return
        }
      }
    },
    beforeUpload(file) {
      console.log('beforeUpload::::', file)
      const _self = this
      const _URL = window.URL || window.webkitURL
      const fileName = file.id
      this.listObj[fileName] = {}
      return new Promise((resolve, reject) => {
        const img = new Image()
        // img.src = _URL.createObjectURL(file)
        img.src = file.url
        img.onload = function() {
          _self.listObj[fileName] = { hasSuccess: true, url: file.url, id: file.id, width: this.width, height: this.height }
        }
        resolve(true)
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.editor-slide-upload {
  margin-bottom: 20px;
  /deep/ .el-upload--picture-card {
    width: 100%;
  }
}
.bottomButton{
    button{
        height: 40px;
    }
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
}
.el-dialog__body {
    padding: 30px 20px;
    color: #606266;
    font-size: 14px;
    background-color: red;
}
.thumbnails{
    margin-bottom: 20px;
}
</style>
